﻿@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Browse</h2>
<div id="app">

    <div id="treeView" class="left">
        <ul class="subEntries"></ul>
    </div>


    <div id="listView" class="middle">
        <div id="dropbox">
            <ul class="entries"></ul>
            <span id="droplabel">Drop file here to add</span>
        </div>
    </div>

    <div class="right">
        <div id="searchView">
            <input id="search" type="text" value="" />
        </div>
        @*<div id="uploadView">
            <form id="uploadForm" enctype="multipart/form-data">
                <input name="file" type="file" class="multi" />
                <input type="button" value="Upload" />
            </form>
            <div id="output" />
        </div>*@
        <div id="metaView">
            <div id="map_canvas" style="width:100%; height:250px"></div>
            <ul class="metadata"></ul>            
            <ul class="actions"></ul>
        </div>
    </div>
</div>

@section templates {
    <script id="entryTemplate" type="text/x-jsrender">
        <div class="entryItem" title="{{:metadata.text}}">
            {{if links.thumbnail != undefined}}
            <img class="ul-li-icon" src="{{:links.thumbnail.url}}?width=32&height=32"
                onerror="this.src='{{:links.typeInfo.url}}?rel=largeIcon';"
                 />
            {{else}}
            <img class="ul-li-icon" src="{{:links.typeInfo.url}}?rel=largeIcon" />
            {{/if}}
            
            <span class="label">
                <a href="#" rel="external" class="changePath">{{:label}}</a>
            </span>
        </div>
    </script>

    <script id="treeHeaderTemplate" type="text/x-jsrender">
        <img class="ul-li-icon" src="{{:links.typeInfo.url}}?rel=smallIcon" />
        <span class="label">
            <a href="#" rel="external" class="changePath">{{:label}}</a>
        </span>
    </script>

    <script id="treeItemTemplate" type="text/x-jsrender">
        <span class="toggleExpand ui-icon" style="display: inline-block"></span>
        <span class="header"></span>
        <ul class="subEntries"></ul>
    </script>

    <script id="metadataTemplate" type="text/x-jsrender">
        <span class="label">{{:key}}:</span>
        <span class="value">
            {{if type == "array" }}
              {{for value ~isEditing=isEditing}}               
               {{if ~isEditing}}<input type="checkbox" class="{{>#data}}" name="{{>#data}}" value="{{>#data}}" checked="checked" />{{/if}}
               {{>#data}}                
              {{/for}}
            {{else}}
              {{if key == "Thumbnail"}}              
                <img src="{{:value}}" />
              {{else}}
                {{:value}}
              {{/if}}
            {{/if}}
            {{for actions}}            
              <a class="{{>#data}}">{{>#data}}</a>
            {{/for}}
            &nbsp; 
        </span>
    </script>
}


@section scripts {

    @CoffeeScripts.Render("~/CoffeeScripts/shared/coffee")
    @CoffeeScripts.Render("~/CoffeeScripts/models/coffee")
    @CoffeeScripts.Render("~/CoffeeScripts/controllers/coffee")
    @CoffeeScripts.Render("~/CoffeeScripts/coffee")
    @Scripts.Render("~/Scripts/coffee-script.js", "~/bundles/waypoint", "~/bundles/jqueryfile")
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

    <script type="text/coffeescript">

$(document).ready(() ->
  app = new Cofe.App({ el : $("#app") })
  app.render()
)
    </script>

}
